<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>后台管理</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.4.1.min.js"></script>
    <!-- 加载jsRender-->
    <script src="js/jsrender.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jsrender.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- Bootstrap-table -->
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
    <style>
        body {
            background-color: #eee;
        }

        .row {
            padding: 20px;
            margin-bottom: 10px;
        }

        .panel-default>.panel-heading, .panel-warning>.panel-heading,
        .panel-danger>.panel-heading, .panel-info>.panel-heading {
            background-color: white;
            font-weight: bold;
        }

        .row>.panel {
            background-color: white;
            box-shadow: 1px 1px 3px #0f0f0f, -1px -1px 3px #0f0f0f;
        }

        .row {
            background-color: rgba(255, 255, 255, .5);
        }

        .panel-default>.count-top {
            font-size: 14px;
            color: rgba(77, 77, 77, .5);
        }

        .panel-default>.count {
            font-size: 30px;
            margin-left: 20px;
            font-weight: bolder;
            text-align: center;
        }
        .input-group-addon {
            width: 80px;
            font-weight: bold;
            padding: 5px;
        }
        .input-group input {
            padding-left: 10px;
        }
        .input-group .form-check{
            margin-left: 10px;
        }

    </style>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img alt="Brand" src="./images/M.svg" width="25" height="25">
            </a>
        </div>
        <div class="collapse navbar-collapse"  id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="./index.html">首页</a></li>
                <li><a href="./user.html">用户管理</a></li>
                <li><a href="./product.html">产品管理</a></li>
                <li class="active"><a href="#">留言管理</a></li>
                <li><a href="./purchasedProduct.html">订单管理</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                        <span id="show-uname" class="text-info" style="margin-left: 5px;">Admin</span>
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                                <span class="text-info" style="margin-left: 5px;">修改密码</span>
                            </a>
                        </li>
                        <li>
                            <a href="http://localhost:8080/ycumall/api/admin.do?method=outLogin">
                                <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
                                <span class="text-info" style="margin-left: 5px;">管理员退出</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!--内容-->
<div class="container">
    <div class="row">
        <div class="col-md-12 panel panel-info well">
            <div class="panel-heading">
                <span>留言管理</span>
                <span>
                    <button id="addUser" class="btn btn-danger btn-sm">添加留言</button>
                </span>
            </div>
            <table id="table" class="table"></table>
        </div>
    </div>
</div>

<div id="body"></div>

<!-- Modal 修改产品数据-->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <form id="update-form">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">修改产品数据</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button id="btn-submit" type="button" class="btn btn-primary">提交修改</button>
                </div>
            </form>

        </div>
    </div>
</div>
<!-- Modal2 添加留言  -->
<div class="modal fade" id="staticBackdrop1" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <form id="add-form">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel1">添加新留言</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modal-body1">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <div class="input-group">
                                <span class="input-group-addon">留言id</span>
                                <input type="text" aria-readonly="true" readonly class="form-control-plaintext" id="staticEmail" value="由系统自动生成,无法自定义">
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="input-group">
                                <span class="input-group-addon">产品id</span>
                                <input type="text" name="pid" class="form-control" id="pid" value="">
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="input-group">
                                <span class="input-group-addon">用户id</span>
                                <input type="text" name="uid" class="form-control" id="uid" value="">
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="input-group">
                                <span class="input-group-addon">描述</span>
                                <input type="text" name="note" class="form-control" id="note" value="">
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="input-group">
                                <span class="input-group-addon">创建时间</span>
                                <input type="text" name="createtime" class="form-control" id="createtime" value="">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button id="add-submit" type="button" class="btn btn-primary">确定添加</button>
                </div>
            </form>

        </div>
    </div>
</div>
<!-- template-->
<!-- 修改留言的的模态框的内容-->
<script id="modalbody" type="text/x-jsrender">
            <ul class="list-group">
                <li class="list-group-item">
                    <div class="input-group">
                        <span class="input-group-addon">Pnid</span>
                        <input type="text" name="pnid" readonly class="form-control-plaintext" id="staticEmail" value="{{:pnid}}">
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="input-group">
                        <span class="input-group-addon">产品Id</span>
                        <input type="text" name="pid" class="form-control" id="pname" value="{{:pid}}">
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="input-group">
                        <span class="input-group-addon">用户Id</span>
                        <input type="text" name="uid" class="form-control" id="price" value="{{:uid}}">
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="input-group">
                        <span class="input-group-addon">产品描述</span>
                        <input type="text" name="note" class="form-control" id="sort" value="{{:note}}">
                    </div>
                </li>
            </ul>
    </script>
<!-- 查看的内容 -->
<script id="modalbody2" type="text/x-jsrender">
        <ul class="list-group">
            <li class="list-group-item">
                <span class="badge">{{:pnid}}</span>
                留言id
            </li>
            <li class="list-group-item">
                <span class="badge">{{:pname}}</span>
                商品Id
            </li>
            <li class="list-group-item">
                <span class="badge">{{:price}}</span>
                用户Id
            </li>
            <li class="list-group-item">
                <span class="badge">{{:sort}}</span>
                用户描述
            </li>
            <li class="list-group-item">
                <span class="badge">{{:count}}</span>
                创建时间
            </li>
        </ul>
    </script>
<script>
    // 为addUser添加点击事件(这个是添加商品的按钮)，模态框出现
    $("#addUser").click(function () {
        $("#staticBackdrop1").modal("show");
    });
    // 添加商品中的添加按钮点击的时候进行的方法
    $("#add-submit").click(function () {
        $.ajax({
            type: "POST",   //提交的方法
            url:"http://localhost:8080/ycumall/api/admin.do?method=addProductnote", //提交的地址
            data:$("#add-form").serialize(),// 序列化表单值，并进行提交
            async: false,
            dataType: "json",
            error: function(XMLHttpRequest, textStatus, errorThrown) {  //失败的话
                alert("连接错误!");
                // 状态码
                console.log(XMLHttpRequest.status);
                // 状态
                console.log(XMLHttpRequest.readyState);
                // 错误信息
                console.log(textStatus);
            },
            success: function(data) {//成功
                if(data.status === 200) {
                    alert("添加成功!")
                    // 暂时隐藏点击按钮所出现的框框
                    $("#staticBackdrop1").modal('hide');
                    // 刷新所显示的表格，因为内容更改了
                    $("#table").bootstrapTable("refresh");
                } else {
                    alert("添加失败!");
                }
            }
        });

    });


    //模态框中的提交按钮触发，执行sql语句，进行数据库的修改
    $("#btn-submit").click(function () {
        $.ajax({
            type: "POST",   //提交的方法
            url:"http://localhost:8080/ycumall/api/admin.do?method=updateProductnote", //提交的地址
            data:$('#update-form').serialize(),// 序列化表单值
            async: false,
            dataType: "json",
            error: function(XMLHttpRequest, textStatus, errorThrown) {  //失败的话
                alert("连接错误!");
                // 状态码
                console.log(XMLHttpRequest.status);
                // 状态
                console.log(XMLHttpRequest.readyState);
                // 错误信息
                console.log(textStatus);
            },
            success: function(data) {  //成功
                if(data.status === 200) {
                    alert("修改成功!")
                    location.reload();
                } else {
                    alert("修改失败!");
                }
            }
        });
        //执行修改之后隐藏
        $("#staticBackdrop").modal('hide');
    });

    //添加按钮
    function addFunctionAlty(value, row, index) {
        return [
            '<button id="delete" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-remove-circle" style="color: red;"></span></button>',
            '<button id="update" type="button" class="btn btn-primary" style="margin-left: 5px; margin-right: 5px;" data-toggle="modal" data-target="#exampleModalCenter"><span class="glyphicon glyphicon-pencil" style="color:#5bc0de;"></span></button>'
        ].join('');
    }

    //执行请求之后，显示用户名，然后将元素的内容设置
    $.get("http://localhost:8080/ycumall/api/admin.do?method=getUserInfo", function (data) {
        $("#show-uname").html(data.data.username);
        console.log(data.data.username);
    });
    //三个按钮的注册点击事件
    window.operateEvents = {
        // row,之前已经查询过的行数据
        'click #delete': function (e, value, row, index) {
            var r = confirm("确定删除该商品?");
            if (r === true) {
                // 根据行id值进行删除留言首页数据
                $("#table").bootstrapTable('removeByUniqueId', row.pnid);
                // 刷新所显示的表格，因为内容更改了
                $("#table").bootstrapTable("refresh");
                // 还需要删除数据库中的数据
                $.post("http://localhost:8080/ycumall/api/admin.do?method=deleteProductnote", "pnid="+row.pnid, function (data) {
                    if (data.status === 200) {
                        alert("删除成功!");
                    }
                });
            }
        }, 'click #update': function (e, value, row, index) {
            // 获取模板
            var template = $.templates("#modalbody");
            // 填充列数据
            var htmlOutput = template.render(row);
            $("#modal-body").html(htmlOutput);
            $("#staticBackdrop").modal('show');
            // 刷新所显示的表格，因为内容更改了
            $("#table").bootstrapTable("refresh");
        }
    };



    //初始化表格
    $('#table').bootstrapTable({
        // 请求后台的url
        url: 'http://localhost:8080/ycumall/api/admin.do?method=getProductnote',
        // 是否显示分页
        pagination: true,
        // 每页的记录行数
        pageSize: 6,
        // 是否显示行间隔色
        striped: true,
        // 定义要排序的列
        sortName: 'pid',
        // 表明每一行的唯一标识字段，一般为主键列
        uniqueId: 'pnid',
        // 以降序来进行排序
        sortOrder: 'desc',
        // 行中数据field:为字段，title为浏览器显示标题
        columns: [{
            field: 'pnid',
            title: '留言ID'
        }, {
            field: 'pid',
            title: '产品id'
        }, {
            field: 'uid',
            title: '用户id'
        }, {
            field: 'note',
            title: '产品描述'
        }, {
            field: 'createtime',
            title: '创建时间',
            formatter: function (value) {
                return new Date(value).format("yyyy-MM-dd hh:mm:ss");
            }
        }, {
            field: 'operate',
            title: '管理',
            //给按钮注册事件
            events: operateEvents,
            //表格中增加按钮，值为一个函数
            //formatter属性可以帮助我们更加灵活的显示数据库中的数据。
            formatter: addFunctionAlty
        }]
    });
    //指定Date的format方法。
    Date.prototype.format = function(fmt) {
        // 对Date的扩展，将 Date 转化为指定格式的String
        // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
        // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
        // 例子：
        // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
        // (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    };
</script>
</body>
</html>